<template>
    <n-data-table :columns="columns" :data="questions" style="margin-top: 20px; margin-left: 5%; width: 90%;"/>
</template>

<script lang="ts">
import router from "@/router";
import { NButton, NTag } from "naive-ui";
import { defineComponent, h, ref } from "vue";
import { useStore } from 'vuex'
import { key } from '@/vuex/index'
import { contest_questions } from '@/models/contests'
import { toGetContestQuestions } from '@/utils/contests'

export default defineComponent({
    created(){
        this.setQuestions();
    },
    props: {
        contestid: {
            type: Number,
            required: true
        }
    },
    setup(props) {
        const store = useStore(key);
        return {
            contest_id: props.contestid,
            columns: [
                {
                    title: '题目编号',
                    key: 'questionNo',
                    align: 'center',
                    render(row: contest_questions){
                        const btn = h(NButton, {
                            text: true,
                            onClick: () => router.push(String(props.contestid) + '/' + row.questionName)
                        },
                        {default: () => row.questionInside});
                        return btn;
                    }
                },
                {
                    title: '题目名称',
                    key: 'questionName',
                    align: 'center',
                    render(row: contest_questions){
                        const btn = h(NButton, {
                            text: true,
                            onClick: () => router.push(String(props.contestid) + '/' + row.questionName)
                        },
                        {default: () => row.questionName});
                        return btn;
                    }
                },
                {
                    title: '难度',
                    key: "difficulty",
                    align: 'center',
                    render(row: contest_questions){
                        const tag = h(NTag, {
                            type: row.difficulty == '简单' ? 'primary' : row.difficulty == '一般' ? 'warning' : 'error'
                        },
                        {default: () => row.difficulty});
                        return tag;
                    }
                },
            ],
            questions: ref<contest_questions[]>()
        }
    },
    methods: {
        async setQuestions() {
            console.log(this.contest_id);
            const data = await toGetContestQuestions(this.contest_id);
            console.log(data);
            if(data) {
                this.questions = data;
            }
        }
    }
})
</script>